<template>
  <div>
    <!-- Form -->
    <el-button class="use" circle @click="dialogFormVisible = true">
      <img :src="use" alt="" />
    </el-button>

    <el-dialog v-model="dialogFormVisible" title="手机号登录">
      <el-form :model="form">
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="phone" placeholder="Please input" clearable />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input
            v-model="password"
            type="password"
            placeholder="Please input password"
            show-password
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="Login(phone, password)" :loading="loading">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useStore } from "vuex";
import { TurnOff, User } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { login } from "../../request/Home/App_resData";

const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const loading = ref(false)
const formLabelWidth = "140px";

let use = ref(
  "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
);
const store = useStore();
const phone = ref();
const password = ref();
const Login = async function (phone, password) {
  loading.value=true
  if (store.state.login.value == null) {
    let res = await store.dispatch("Login", { phone, password });
    store.state.login = res;
    if (res) {
      let status = await store.dispatch("status"); //检查登录状态
      if (status.data.data.account.id) {
        dialogFormVisible.value = false,
        store.state.User = false,
        loading.value=false
          ElMessage({
            message: "登录成功",
            grouping: true,
            type: "success",
          });
      }else{
        ElMessage({
            message: "登录失败",
            grouping: true,
            type: "error",
          });
      }
    }
    use.value = store.state.login.data.profile.avatarUrl; //用户头像
  }
};
</script>
<style lang="less" scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.use {
  height: 30px;
  width: 30px;
  img {
    height: 30px;
    width: 30px;
    border-radius: 50%;
  }
}
</style>
